<template>
  <a-modal width="800px" class="anchor-info" title="授权书" :visible="value" :maskClosable="false" @cancel="onCancel">
    <a-spin tip="提交中..." :spinning="isSubLoading">
      <a-form-model class="model-box" ref="hotelAuthForm" :model="hotelAuthForm" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
        <a-form-model-item label="类型" prop="type" :rules="[{ required: true, trigger: 'change', message: '请选择类型' }]">
          <a-radio-group v-model="hotelAuthForm.type" @change="changeRadio">
            <a-radio :value="1">
              非酒旅
            </a-radio>
            <a-radio :value="2">
              酒旅
            </a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item label="商家营业执照登记名称" prop="shopName" :rules="[{ required: true, trigger: 'blur', message: '请输入商家营业执照登记名称' }]">
          <a-input v-model="hotelAuthForm.shopName" :max-length="50" style="width:240px;" placeholder="请输入商家营业执照登记名称"></a-input>
        </a-form-model-item>
        <div>
          <a-row><a-col :span="8" style="text-align:right;">套餐：</a-col></a-row>
          <a-row>
            <a-col :span="8"></a-col>
            <a-col :span="16" style="margin-top:-22px;">
              <div v-for="(proItem, proIndex) in hotelAuthForm.productInfos" :key="proIndex" class="item-box flex">
                <a-form-model-item
                  :label-col="{ span: 0 }"
                  :wrapper-col="{ span: 22 }"
                  :prop="'productInfos.' + proIndex + '.itemName'"
                  :rules="[{ required: true, trigger: 'blur', message: '请输入套餐名称' }]"
                >
                  <a-input v-model="proItem.itemName" :max-length="50" placeholder="请输入套餐名称"></a-input>
                </a-form-model-item>
                <a-form-model-item
                  :label-col="{ span: 0 }"
                  :wrapper-col="{ span: 22 }"
                  :prop="'productInfos.' + proIndex + '.itemPrice'"
                  :rules="[
                    { required: true, trigger: 'blur', message: '请输入套餐价格' },
                    {
                      pattern: /^\d+(\.\d+)?$/,
                      message: '金额格式有误',
                      trigger: 'blur'
                    }
                  ]"
                >
                  <a-input v-model="proItem.itemPrice" :max-length="20" placeholder="请输入套餐价格"></a-input>
                </a-form-model-item>
                <div class="deta-btn">
                  <a-button type="primary" shape="circle" @click="dealProLists('add', proIndex)" size="small" icon="plus" v-if="proIndex === 0" />
                  <a-button type="primary" shape="circle" @click="dealProLists('del', proIndex)" size="small" icon="delete" v-else />
                </div>
              </div>
            </a-col>
          </a-row>
        </div>
        <div v-if="hotelAuthForm.type === 2">
          <a-form-model-item label="授权时间" prop="selectTime" :rules="[{ required: true, trigger: 'change', message: '请选择授权时间' }]">
            <a-range-picker v-model="hotelAuthForm.selectTime" />
          </a-form-model-item>
          <a-form-model-item label="我公司与商品权利人关系" prop="relationship" :rules="[{ required: true, trigger: 'change', message: '请选择关系' }]">
            <a-radio-group v-model="hotelAuthForm.relationship">
              <a-radio value="隶属同一集团/实际控制人相同" class="margin-bottom-5"> 隶属同一集团/实际控制人相同 </a-radio><br />
              <a-radio value="我公司系该商品国内总代理" class="margin-bottom-5"> 我公司系该商品国内总代理 </a-radio><br />
              <a-radio :value="relationshipOther" class="margin-bottom-5">
                其他
              </a-radio>
              <!-- todo 若删除，为空，强行加入 -->
              <a-input
                v-if="hotelAuthForm.relationship !== '隶属同一集团/实际控制人相同' && hotelAuthForm.relationship !== '我公司系该商品国内总代理'"
                v-model="relationshipOther"
                :max-length="50"
                @input="otherInfo"
                @blur="blurOther"
                style="width:240px;"
                placeholder="我公司与商品权利人关系"
              ></a-input>
            </a-radio-group>
          </a-form-model-item>
          <div>
            <a-row><a-col :span="8" style="text-align:right;">授权清单：</a-col></a-row>
            <a-row>
              <a-col :span="8"></a-col>
              <a-col :span="16" style="margin-top:-20px;">
                <div v-for="(item, index) in hotelAuthForm.authLists" :key="index" class="item-box">
                  <div class="flex">
                    <a-form-model-item
                      :label-col="{ span: 0 }"
                      :wrapper-col="{ span: 23 }"
                      :prop="'authLists.' + index + '.shopName'"
                      :rules="[{ required: true, trigger: 'blur', message: '请输入门店名称' }]"
                    >
                      <a-input :max-length="50" v-model="item.shopName" placeholder="请输入门店名称"></a-input>
                    </a-form-model-item>
                    <a-form-model-item
                      :label-col="{ span: 0 }"
                      :wrapper-col="{ span: 23 }"
                      :prop="'authLists.' + index + '.address'"
                      :rules="[{ required: true, trigger: 'blur', message: '请输入门店地址' }]"
                    >
                      <a-input :max-length="50" v-model="item.address" placeholder="请输入门店地址"></a-input>
                    </a-form-model-item>
                  </div>
                  <a-form-model-item
                    :label-col="{ span: 0 }"
                    :wrapper-col="{ span: 24 }"
                    :prop="'authLists.' + index + '.timeArea'"
                    :rules="[{ required: true, trigger: 'blur', message: '请选择时间范围' }]"
                  >
                    <a-range-picker
                      v-model="item.timeArea"
                      @change="
                        (date, dateString) => {
                          return onChangeAuthListsTime(date, dateString, index)
                        }
                      "
                    />
                  </a-form-model-item>

                  <div class="deta-btn">
                    <a-button type="primary" shape="circle" @click="dealAuthLists('add', index)" size="small" icon="plus" v-if="index === 0" />
                    <a-button type="primary" shape="circle" @click="dealAuthLists('del', index)" size="small" icon="delete" v-else />
                  </div>
                </div>
              </a-col>
            </a-row>
          </div>
        </div>
      </a-form-model>
    </a-spin>
    <!-- 操作 -->
    <template slot="footer">
      <template style="display:flex;justify-content: center;">
        <a-button @click="onCancel">关闭</a-button>
        <a-button type="primary" style="background:#1D6FE9" @click="submitApply">提交</a-button>
      </template>
    </template>
  </a-modal>
</template>
<script>
import { hotelAddOrUpdate } from '@/service'
import moment from 'moment'
const g = function(row = {}) {
  return {
    poiId: row.poiId || '',
    type: row.type || 1,
    authLists: row.authLists || [authG({})],
    relationship: row.relationship || '隶属同一集团/实际控制人相同',
    etime: row.selectTime ? moment(row.selectTime[1]).format('YYYY年MM月DD日') : '',
    shopName: row.shopName || '',
    stime: row.selectTime ? moment(row.selectTime[0]).format('YYYY年MM月DD日') : '',
    productInfos: row.productInfos || [productG({})]
  }
}
let postForm = function(row = {}) {
  const { type, authLists = [], relationship, selectTime = [], shopName, productInfos } = row
  return {
    type,
    authLists: type === 2 ? postAuthG(authLists) : [],
    relationship: type === 2 ? relationship : '',
    shopName,
    productInfos: productInfos && productInfos.length > 0 ? productInfos : [],
    etime: type === 2 ? moment(selectTime[1]).format('YYYY年MM月DD日') : '',
    stime: type === 2 ? moment(selectTime[0]).format('YYYY年MM月DD日') : ''
  }
}
const authG = function(item = {}) {
  return {
    address: item.address || '',
    shopName: item.shopName || '',
    timeArea: item.timeArea || []
  }
}

const productG = function(item = {}) {
  return {
    itemName: item.itemName || '',
    itemPrice: item.itemPrice || ''
  }
}

let postAuthG = function(itemArr = []) {
  return itemArr.map((item) => {
    const { address, shopName, timeArea = [] } = item
    return {
      address,
      shopName,
      timeArea: moment(timeArea[0]).format('YYYY年MM月DD日') + '-' + moment(timeArea[1]).format('YYYY年MM月DD日')
    }
  })
}

export default {
  name: 'hotelAuth',
  props: {
    value: {
      type: Boolean,
      default: false
    },
    itemPoiId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      moment,
      isSubLoading: false,
      hotelAuthForm: g(),
      relationshipOther: '其他'
    }
  },
  mounted() {},
  methods: {
    otherInfo() {
      this.hotelAuthForm.relationship = this.relationshipOther
    },
    blurOther() {
      if (!this.relationshipOther) {
        this.hotelAuthForm.relationship = '其他'
        this.relationshipOther = '其他'
      }
    },
    changeRadio(e) {
      const { target } = e || {}
      this.hotelAuthForm = g({})
      this.hotelAuthForm.type = target.value || 1
    },
    onCancel() {
      this.$emit('input', false)
      this.hotelAuthForm = g({})
      this.isSubLoading = false
      this.clearForm()
    },
    clearForm() {
      let form = this.$refs.hotelAuthForm
      if (form && form.clearValidate) {
        this.$nextTick(() => {
          form.clearValidate()
        })
      }
    },
    submitApply() {
      this.$refs.hotelAuthForm.validate((valid, obj = {}) => {
        let postFormParams = postForm(this.hotelAuthForm)
        postFormParams.poiId = this.itemPoiId
        console.log(postFormParams)
        this.hotelAuthForm.poiId = this.itemPoiId
        if (valid) {
          this.isSubLoading = true
          hotelAddOrUpdate(postFormParams)
            .then((res) => {
              this.$emit('callback')
              this.onCancel()
            })
            .finally(() => {
              this.isSubLoading = false
            })
            .catch(() => {
              this.isSubLoading = false
            })
        }
      })
    },
    onChangeAuthListsTime(index, date, dateString) {
      console.log(index, date, dateString)
      // this.$set(this.hotelAuthForm.authLists[index],'timeArea',)
    },
    // 增删数据
    dealAuthLists(type = '', index) {
      let addAuthLists = authG()
      if (type === 'add') {
        this.hotelAuthForm.authLists.push(addAuthLists)
      } else if (type === 'del') {
        this.hotelAuthForm.authLists.splice(index, 1)
      }
    },
    dealProLists(type = '', index) {
      let addProLists = productG()
      if (type === 'add') {
        this.hotelAuthForm.productInfos.push(addProLists)
      } else if (type === 'del') {
        this.hotelAuthForm.productInfos.splice(index, 1)
      }
    }
  }
}
</script>
<style scoped lang="less">
/deep/ .ant-form-item {
  margin-bottom: 5px;
}
::-webkit-scrollbar {
  width: 5px;
  background: #f9f9f9;
}
.model-box {
  max-height: 600px;
  overflow-y: scroll;
}
.margin-bottom-5 {
  margin-bottom: 5px;
}
.item-box {
  margin-bottom: 5px;
  position: relative;
  background: #f6f6f6;
  padding: 8px;
  border-radius: 10px;
  margin-right: 3px;
  /deep/ .ant-form-item {
    margin-bottom: 0px;
  }
  .deta-btn {
    position: absolute;
    right: 8px;
    top: 20px;
  }
}
.flex {
  display: flex;
}
</style>
